/*
 * @Description: 设备统计
 * @Author: kanglin
 * @Date: 2018-10-29 13:45:38
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" scoped rel="stylesheet/less" type="text/less" >
     .v-com-device-statistic, .card{
        background: #ffffff;
        border-radius:10px;
    }
    .card__title {
        padding-left: 50px;
        height:76px;
        font-size:24px;
        font-weight:600;
        line-height:76px;
        color:rgba(51,51,51,1);
        font-family:Segoe UI;
    }
    .card__content{
        padding-left: 50px;
        padding-right: 50px;
    }
    .card__title__icon{
        display: inline-block;
        height: 28px;
        width: 28px;
        vertical-align: -.9em;
        &>img{
            width: 100%;
            vertical-align: top;
        }
    }
    .list__item__icon{
        display: inline-block;
        width: 76px;
        height: 76px;
        vertical-align: top;
        &>img{
            width: 100%;
        }
    }
    .card__content{
        padding-bottom: 43px;
    }

    .customers{
        list-style: none;
        display: flex;
        justify-content: flex-start;
		padding-bottom: 32px;
    }
    .customers__item{
        width:286px;
        height:138px;
        border:1px solid rgba(230,230,230,1);
		border-radius:12px;
		margin-right: 106px;
    }
    .customers__item__icon{
        width: 80px;
        display: inline-block;
        height: 102px;
        margin: 18px 0 18px 18px;
        &>img{
            width: 100%;
        }
    }

    .customers__item__info{
        width: 156px;
        text-align: right;
        margin-top: 37px;
        vertical-align: top;
        display: inline-block;
    }

    .customers__item__info__model{
        padding-bottom: 8px;
        height:32px;
        font-size:22px;
        font-weight:600;
        line-height:32px;
        color:rgba(51,51,51,1);
    }
    .customers__item__info__times{
        height:24px;
        font-size:16px;
        font-weight:600;
        line-height:24px;
        color:rgba(150,167,254,1);
    }

    .pagination{
        margin-top: 18px;
        text-align: center;
    }

    @deep: ~">>>";
    @{deep} .ivu-table-header .ivu-table-cell{
        height:30px;
        font-size:20px;
        font-weight:600;
        line-height:30px;
        color:rgba(51,51,51,1);
	}

	@{deep} .ivu-table-tbody .ivu-table-cell{
		height:27px;
		font-size:18px;
		font-weight:400;
		line-height:27px;
		color:rgba(51,51,51,1);
	}
    @{deep} .ivu-table th{
        background: #ffffff;
        height:30px;
        padding: 18px 0 16px;
	}

 </style>

<template>
	<div class="v-com-customer-statistic card">
		<div class="card__title">
			客户统计
		</div>
		<div class="card__content">
			<ul class="customers">
				<li class="customers__item">
					<div class="customers__item__icon">
						<img
							src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 205@2x.png"
							alt="">
					</div>
					<div class="customers__item__info">
						<p class="customers__item__info__model">
							客户总人数
						</p>
						<p class="customers__item__info__times">
							{{ getCustomerCount }}人
						</p>
					</div>
				</li>

				<li class="customers__item">
					<div class="customers__item__icon">
						<img
							src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 204@2x.png"
							alt="">
					</div>
					<div class="customers__item__info">
						<p class="customers__item__info__model">
							总售出设备
						</p>
						<p class="customers__item__info__times">
							{{ getDeviceCount }}台
						</p>
					</div>
				</li>
			</ul>

			<Table
				:columns="columns"
				:data="customers"
				:loading="loading"
				class="personal-scrollbar"
				height="476"/>

			<div class="pagination">
				<Page
					:page-size-opts="[15,30,60]"
					:total="pageTotal"
					:current="currentPage"
					:page-size="perPage"
					placement="top"
					show-sizer
					@on-change="handlePageNumberChange"
					@on-page-size-change="handlePageSizeChange"/>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CustomerStatistic',
	props: {
		customerCount: {
			type: Number,
			default() {
				return 0;
			},
		},
		deviceCount: {
			type: Number,
			default() {
				return 0;
			},
		},
		loading: {
			type: Boolean,
			required: true,
		},
		pageTotal: {
			type: Number,
			default() {
				return 0;
			},
		},
		perPage: {
			type: Number,
			default() {
				return 15;
			},
		},
		currentPage: {
			type: Number,
			default() {
				return 1;
			},
		},
		customers: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					align: 'center',
					title: '客户名称',
					key: 'name',
				},
				{
					align: 'center',
					title: '店铺数量',
					key: 'store_count',
				},
				{
					align: 'center',
					title: '设备数量',
					key: 'device_account_count',
				},
				{
					align: 'center',
					title: '测肤次数',
					key: 'skin_record_count',
				},
				{
					align: 'center',
					title: '试妆次数',
					key: 'product_tryon_count',
				},
				{
					align: 'center',
					title: '用户量',
					key: 'wechat_user_count',
				},
			],
		};
	},
	computed: {
		getCustomerCount() {
			return this.customerCount;
		},
		getDeviceCount() {
			return this.deviceCount;
		},
	},
	methods: {
		/**
		 * 处理页面size改变
		 */
		handlePageSizeChange(size) {
			this.$emit('page-change', { page: 1, per_page: size });
		},
		/**
		 * 处理页面改变
		 */
		handlePageNumberChange(number) {
			this.$emit('page-change', { page: number });
		},
	},
};
</script>

 <style scoped>

 </style>
